<template>
	<view class="flex-col group">
		<view class="flex-row section_1">
			<block v-if="hasLogin">
				<u-avatar :src="user.avatar==null?avatar:user.avatar" :size="108" class="image_1"></u-avatar>
				<view class="flex-col group_1">
					<text>{{user.nickname}}</text>
					<!-- 			<view class="flex-row group_2">
						<image src="/static/remote/213353956174cddf1be09324669c11d9.png" class="image_2" />
						<view class="number">{{user.mobile}}</view>
					</view> -->
					<view class="flex-row group_2">
						<view class="number"> {{ userVipRoleLabel }}</view>
					</view>
				</view>
			</block>
			<block v-else>
				<u-avatar :src="user.avatar==null?avatar:user.avatar" :size="108" class="image_1"></u-avatar>
				<view class="flex-col group_1" @click="navigateTo('/pages/login/index/index',false)">点击登录</view>
			</block>
		</view>
		<!-- <view class="justify-between section_2">
			<view class="flex-col items-center group_3" @click="navigateTo('/pages/mine/account/index')">
				<image src="/static/local/16403089942774187971.png" class="image_4" />
				<text class="text_2">账户</text>
			</view>
			<view class="center-image-wrapper flex-col items-center view">
				<image src="/static/local/84e211999e33d53e897502a93391af1b.png" class="image_5" />
			</view>
			<view class="center-image-wrapper flex-col items-center view_1"
				@click="navigateTo('/pages/mine/square/index')">
				<image src="/static/local/16403089942773920621.png" class="image_6" />
				<text class="text_3">广场</text>
				<u-badge type="error" is-dot is-center v-show="vk.getVuex('$app.likeBadge')"></u-badge>
			</view>
		</view> -->
		<view class="vip-banner-box" @click="navigateTo('/pages/role/role')">
			<image src="/static/member/vip-banner.png" style="width: 100%; height: 120rpx"></image>
		</view>
		<view class="flex-col section_3">
			<text class="text_4">我的课程</text>
			<view class="flex-row equal-division">
				<view class="flex-col items-center equal-division-item"
					@click="navigateTo('/pages/mine/my-course/index')">
					<image src="/static/local/16403089942774003987.png" class="image_8" />
					<text class="text_5">我的课程</text>
				</view>
				<view class="flex-col items-center equal-division-item_1"
					@click="navigateTo('/pages/mine/my-course/rate')">
					<image src="/static/remote/3dea270ec84dede55cc92d81652c6233.png" class="image_9" />
					<text class="text_6">学习进度</text>
				</view>
				<view class="flex-col items-center equal-division-item_2"
					@click="navigateTo('/pages/mine/my-course/order')">
					<image src="/static/local/16403089942772767646.png" class="image_11" />
					<text class="text_7">我的订单</text>
				</view>
				<view class="flex-col items-center equal-division-item_3"
					@click="navigateTo('/pages/mine/my-course/collection')">
					<image src="/static/local/16403089942788092290.png" class="image_12" />
					<text class="text_8">我的收藏</text>
				</view>
			</view>
		</view>
		<view class="flex-col section_4">
			<view class="justify-between group_4" @click="navigateTo('/pages/mine/account/index')">
				<view class="flex-row">
					<image src="/static/local/16403089942774187971.png" class="image_9"
						style="margin-left: 12rpx; width : 55rpx;height: 55rpx;" />
					<text class="text_9">账户</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_4" @click="navigateTo('/pages/mine/square/index')">
				<view class="flex-row">
					<image src="/static/local/16403089942773920621.png" class="image_9"
						style="margin-left: 12rpx; width : 55rpx;height: 55rpx;" />
					<text class="text_9">广场动态</text>
					<u-badge type="error" is-dot is-center v-show="vk.getVuex('$app.likeBadge')"></u-badge>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_4" @click="navigateTo('/pages/mine/personal-data')">
				<view class="flex-row">
					<image src="/static/remote/d473f3ed971fb0b09b83c4caf71752ae.png" class="image_9" />
					<text class="text_9">个人资料</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_6" @click="navigateTo('/pages/mine/suggest')">
				<view class="flex-row">
					<image src="/static/local/16403089942788495326.png" class="image_18" />
					<text class="text_10">意见反馈</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_8" @click="navigateTo('/pages/mine/privacy?type=1')">
				<view class="flex-row">
					<image src="/static/local/16403089942788962540.png" class="image_21" />
					<text class="text_11">隐私政策</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_8" @click="navigateTo('/pages/mine/privacy?type=2')">
				<view class="flex-row">
					<u-icon name="order" size="50" style="margin-left: -4rpx;"></u-icon>
					<text class="text_11_s">用户协议</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_8" @tap="connect">
				<view class="flex-row">
					<u-icon name="phone" size="50"></u-icon>
					<text class="text_11_s">联系客服</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
			<image src="/static/local/16f5e7d385825ecae10a8c9017931ac2.png" class="image_16" />
			<view class="justify-between group_10" @click="navigateTo('/pages/mine/setting/index')">
				<view class="flex-row">
					<image src="/static/local/0d212af98ab4446cefecbd09bdc9d080.png" class="image_24" />
					<text class="text_12">设置</text>
				</view>
				<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png" class="image_14" />
			</view>
		</view>


		<!-- 联系客服弹框 -->
		<u-mask :show="connectPop" @click="connectPop = false">
			<view class="btns_bg">
				<view class="phone_btn" @click.stop="copy">客服电话：{{phone}}</view>
				<view class="cancel_btn">取消</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				avatar: require('../../static/member/avatra.png'),
				user: {
					avatar: require('../../static/member/avatra.png'),
					nickname: "未登录",
					_id: null
				},
				hasLogin: false,
				phone: '',
				connectPop: false,
				userVipRole: []
			}
		},
		computed: {
			userVipRoleLabel() {
				if (this.userVipRole.length == 0)
					return "免费会员"
				return this.userVipRole.map(v => v.label).join(',')
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)

			uni.$on('relogin', () => { this.getUserInfo() })
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			if (this.user._id == null && uni.vk.callFunctionUtil.checkToken()) {
				this.getUserInfo()
				this.hasLogin = true
			}

			if (!uni.vk.callFunctionUtil.checkToken()) {
				this.user = {
					avatar: require('../../static/member/avatra.png'),
					nickname: "点击登录",
					_id: null
				}
				this.hasLogin = false
			} else {
				this.getSquireInfo()
			}
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {},
			//会员中心
			goRole() {},
			// 获取用户信息
			getUserInfo() {
				let that = this
				uni.vk.callFunction({
					url: 'user/kh/getMyUserInfo',
				}).then(data => {
					that.user = data.userInfo
					getApp().globalData.userInfo = data.userInfo
					return uni.vk.callFunction({
						url: 'client/vip_roles/kh/getMyRoles',
					})
				}).then(res => {
					that.userVipRole = res.data
					getApp().globalData.userVipRole = res.data
				})
			},
			// 广场角标
			getSquireInfo() {
				if (!vk.getStorageSync('uni_id_token')) return
				vk.callFunction({
					url: 'client/angle-mark/kh/getSquireList',
					data: { need_user_info: true },
					success: function(res) {
						if (res.data == null) return uni.hideTabBarRedDot({ index: 3 })
						console.log(res.data);
						vk.setVuex('$app.likeBadge', res.data)
						uni.showTabBarRedDot({ index: 3 })
					}
				})
			},
			// 联系客服
			connect() {
				vk.callFunction({
					url: 'client/setting/pub/getPhone',
					title: '请求中...'
				}).then(({ data }) => {
					that.phone = data.number
					that.connectPop = true
				})
			},
			copy() {
				uni.setClipboardData({
					data: that.phone + '',
					success: () => { uni.showToast({ title: '复制成功' }) }
				})
			}
		},
		onUnload() {
			uni.$off('relogin')
		}
	}
</script>

<style lang="scss" scoped>
	.group {
		padding: 20rpx 24rpx;
		flex: 1 1 auto;
		overflow-y: auto;
		background: #F5F5F5;
		min-height: 100vh;

		.section_1 {
			padding: 46rpx 28rpx;
			color: rgb(20, 0, 5);
			font-size: 34rpx;
			line-height: 41rpx;
			white-space: nowrap;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;

			.image_1 {
				filter: drop-shadow(0px 3rpx 8rpx rgba(0, 0, 0, 0.16));
				width: 118rpx;
				height: 118rpx;
			}

			.group_1 {
				margin-left: 20rpx;
				flex: 1 1 auto;
				align-self: center;

				.group_2 {
					margin-top: 16rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;

					.number {
						margin-left: 8rpx;
					}

					.image_2 {
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}

		.section_2 {
			margin-top: 20rpx;
			padding: 30rpx 142rpx 26rpx 148rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;
			justify-content: center;

			.group_3 {
				margin-top: 3rpx;
				color: rgb(20, 0, 5);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.image_4 {
					width: 58rpx;
					height: 49rpx;
				}

				.text_2 {
					margin-top: 25rpx;
				}
			}

			.center-image-wrapper {
				width: 62rpx;

				.image_5 {
					width: 3rpx;
					height: 81rpx;
				}

				.image_6 {
					width: 54rpx;
					height: 54rpx;
				}

				.text_3 {
					margin-top: 28rpx;
				}
			}

			.view {
				align-self: center;
			}

			.view_1 {
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;
				position: relative;
			}
		}

		.section_3 {
			margin-top: 20rpx;
			padding: 34rpx 10rpx 19rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;

			.text_4 {
				margin-left: 20rpx;
				color: rgb(20, 0, 5);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
			}

			.equal-division {
				margin-top: 26rpx;
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;

				.equal-division-item {
					padding: 16rpx 0 13rpx;
					flex: 1 1 170rpx;

					.image_8 {
						width: 49rpx;
						height: 52rpx;
					}

					.text_5 {
						margin-top: 22rpx;
					}
				}

				.equal-division-item_1 {
					padding: 7rpx 0 13rpx;
					flex: 1 1 170rpx;

					.text_6 {
						margin-top: 17rpx;
					}
				}

				.equal-division-item_2 {
					padding: 13rpx 0 13rpx;
					flex: 1 1 170rpx;

					.image_11 {
						width: 43rpx;
						height: 53rpx;
					}

					.text_7 {
						margin-top: 24rpx;
					}
				}

				.equal-division-item_3 {
					padding: 12rpx 0 13rpx;
					flex: 1 1 170rpx;

					.image_12 {
						width: 58rpx;
						height: 56rpx;
					}

					.text_8 {
						margin-top: 22rpx;
					}
				}
			}
		}

		.section_4 {
			margin-top: 20rpx;
			color: rgb(51, 51, 51);
			font-size: 30rpx;
			line-height: 36rpx;
			white-space: nowrap;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;

			.group_4 {
				padding: 29rpx 30rpx 28rpx;

				.text_9 {
					margin-left: 20rpx;
					align-self: center;
				}
			}

			.image_16 {
				width: 93.5vw;
				height: 0.5vw;
			}

			.group_6 {
				padding: 33rpx 30rpx 34rpx 37rpx;

				.image_18 {
					width: 52rpx;
					height: 57rpx;
				}

				.text_10 {
					margin-left: 27rpx;
					align-self: center;
				}
			}

			.group_8 {
				padding: 35rpx 30rpx 36rpx 39rpx;

				.image_21 {
					width: 48rpx;
					height: 53rpx;
				}

				.text_11 {
					margin: 10rpx 0 8rpx 29rpx;
				}

				.text_11_s {
					margin: 10rpx 0 8rpx 24rpx;
				}
			}

			.group_10 {
				padding: 36rpx 30rpx 38rpx 38rpx;

				.image_24 {
					width: 49rpx;
					height: 49rpx;
				}

				.text_12 {
					margin: 7rpx 0 6rpx 29rpx;
				}
			}

			.image_14 {
				align-self: center;
				width: 16rpx;
				height: 28rpx;
			}
		}

		.image_9 {
			width: 66rpx;
			height: 66rpx;
		}
	}

	.btns_bg {
		position: absolute;
		left: 20rpx;
		right: 20rpx;
		bottom: 32rpx;
	}

	.phone_btn {
		padding: 50rpx 0;
		text-align: center;
		color: #333333;
		margin-bottom: 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	.cancel_btn {
		padding: 19rpx 0;
		text-align: center;
		color: #999999;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	.vip-banner-box {
		width: 100%;
		height: 120rpx;
		background: #ffffff;
	}
</style>
